<template>
  <div class="overview">
    <div class="overview-tabs">
      <span :class="activeName=='xiangmu'?'active':''" @click="handleTab('xiangmu')">项目策划概览</span>
      <span
        :class="activeName=='shigong'?'active':''"
        style="margin-left: 22px;"
        @click="handleTab('shigong')"
      >施工日志概览</span>
    </div>
    <div class="overview-content">
      <div v-if="activeName=='xiangmu'">
        <div class="content-item1">
          <div><span class="overview-icon">管理与实施策划</span>
            <div class="content-info">
              <div class="content-info-item">
                <div class="item_div">
                  <span style="font-size:13px;">待上传</span>
                  <span style="font-size:22px;margin-left:22px">{{ data1.guanli }}</span>
                  <div style="color:#909399;height:14px;line-height:14px;font-size:10px;">管理策划文件</div>
                </div>
                <div class="item_div" style="border-left:1px solid #DEDEDE;border-right:1px solid #DEDEDE;">
                  <span style="font-size:13px;">待上传</span><span
                    style="font-size:22px;margin-left:22px"
                  >{{ data1.shishi }}</span>
                  <div style="color:#909399;height:14px;line-height:14px;font-size:10px;">实施策划文件</div>
                </div>
                <div class="item_div">
                  <span style="font-size:13px;">全部完成</span><span
                    style="font-size:22px;margin-left:22px"
                  >{{ data1.all }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content-item2">
          <div><span class="overview-icon">组织机构设置</span>
            <div class="content-info">
              <div class="content-info-item">
                <div class="item_div"><span style="font-size:13px;">待设置</span><span
                  style="font-size:22px;margin-left:22px"
                >{{ data2.shezhi }}</span>
                </div>
                <div class="item_div" style="border-left:1px solid #DEDEDE;border-right:1px solid #DEDEDE;">
                  <span style="font-size:13px;">待配置</span><span
                    style="font-size:22px;margin-left:22px"
                  >{{ data2.peizhi }}</span>
                </div>
                <div class="item_div">
                  <span style="font-size:13px;">全部完成</span><span
                    style="font-size:22px;margin-left:22px"
                  >{{ data2.all }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content-item3">
          <div><span class="overview-icon">班子成员设置</span>
            <div class="content-info">
              <div class="content-info-item">
                <div class="item_div"><span style="font-size:13px;">待设置</span><span
                  style="font-size:22px;margin-left:22px"
                >{{ data3.shezhi }}</span>
                </div>
                <div class="item_div" style="border-left:1px solid #DEDEDE;border-right:1px solid #DEDEDE;">
                  <span style="font-size:13px;">待配置</span><span
                    style="font-size:22px;margin-left:22px"
                  >{{ data3.peizhi }}</span>
                </div>
                <div class="item_div">
                  <span style="font-size:13px;">全部完成</span><span
                    style="font-size:22px;margin-left:22px"
                  >{{ data3.all }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content-item4">
          <div><span class="overview-icon">分包商进场</span>
            <div class="content-info">
              <div class="content-info-item">
                <div class="item_div"><span style="font-size:13px;">未进场</span><span
                  style="font-size:22px;margin-left:22px"
                >{{ data4.wjc }}</span>
                </div>
                <div class="item_div" style="border-left:1px solid #DEDEDE;border-right:1px solid #DEDEDE;">
                  <span style="font-size:13px;">已进场</span><span
                    style="font-size:22px;margin-left:22px"
                  >{{ data4.yjc }}</span>
                </div>
                <div class="item_div">
                  <span style="font-size:13px;">全部</span><span
                    style="font-size:22px;margin-left:46px"
                  >{{ data4.quanb }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="activeName=='shigong'" class="build-content">
        <el-table :data="tableData" height="380" style="width: 100%;over-flow:auto;">
          <el-table-column prop="xiangmmc" label="项目部" width="220" />
          <el-table-column prop="dangrwcgzl" label="填报情况" />
          <el-table-column prop="riq" label="日期" width="140" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Global from '../../utils/Global.js'
const uplodadUrl = Global.uplodadUrl
export default {
  data() {
    return {
      activeName: 'xiangmu',
      data1: { // 管理与实施
        guanli: '',
        shishi: '',
        all: ''
      },
      data2: { // 组织机构
        shezhi: '',
        peizhi: '',
        all: ''
      },
      data3: { // 班子成员
        shezhi: '',
        peizhi: '',
        all: ''
      },
      data4: { // 分包商进场
        wjc: '',
        jxz: '',
        yjc: ''
      },
      tableData: []
    }
  },
  mounted() {
    this.getAllData()
  },
  methods: {
    // 获取项目概览所有数据
    getAllData() {
      this.GetDoingPlansOfProject()
      this.GetOrganizationConfiguration()
      this.GetMembersOfProjectConfiguration()
      this.GetSubcontractorStatus()
      this.GetProjectJournalGroupByDate()
    },
    // 管理与实施策划
    GetDoingPlansOfProject() {
      axios({
        method: 'get',
        url: `${uplodadUrl}/Pmsapi/index/GetDoingPlansOfProject`
      }).then((res) => {
        // res.data.code==200
        // console.log(res.data.data, '管理与实施策划')
        this.data1 = {
          guanli: res.data.data[0].管理策划文件,
          shishi: res.data.data[0].实施策划文件,
          all: res.data.data[0].全部完成
        }
      })
    },
    // 组织机构设置
    GetOrganizationConfiguration() {
      axios({
        method: 'get',
        url: `${uplodadUrl}/Pmsapi/index/GetOrganizationConfiguration`
      }).then((res) => {
        // console.log(res, '组织机构设置')
        // res.data.code==200
        this.data2 = {
          shezhi: res.data.data[0].待设置,
          peizhi: res.data.data[0].待配置,
          all: res.data.data[0].全部完成
        }
      })
    },
    // 班子成员
    GetMembersOfProjectConfiguration() {
      axios({
        method: 'get',
        url: `${uplodadUrl}/Pmsapi/index/GetMembersOfProjectConfiguration`
      }).then((res) => {
        // console.log(res, '班子成员设置')
        // res.data.code==200
        this.data3 = {
          shezhi: res.data.data[0].待设置,
          peizhi: res.data.data[0].待配置,
          all: res.data.data[0].全部完成
        }
      })
    },
    // 分包商进场
    GetSubcontractorStatus() {
      axios({
        method: 'get',
        url: `${uplodadUrl}/Pmsapi/index/GetSubcontractorStatus`
      }).then((res) => {
        // console.log(res, '分包商进场')
        // res.data.code==200
        this.data4 = {
          wjc: res.data.data[0].未进场,
          quanb: res.data.data[0].全部,
          yjc: res.data.data[0].已进场
        }
      })
    },
    // 施工日志
    GetProjectJournalGroupByDate() {
      axios({
        method: 'get',
        url: `${uplodadUrl}/Pmsapi/ProjectCompliance/GetProjectJournalGroupByDate`
      }).then((res) => {
        console.log(res, '施工日志')
        if (res.data.code === 200) {
          res.data.data.forEach(item => {
            if (item.riq) {
              item.riq = item.riq.split('T')[0]
            }
          })
          this.tableData = res.data.data
        }
      })
    },
    handleTab(val) {
      if (val === 'xiangmu') this.activeName = 'xiangmu'
      if (val === 'shigong') this.activeName = 'shigong'
    }
  }

}

</script>
<style lang="scss" scoped>
  .overview {
    width: 100%;
    height: 424px;
    margin-top: 5px;
    background: #FFFFFF;

    .overview-tabs {
      border-bottom: 1px solid #1468B7;
      padding-top: 7px;
      padding: 10px;

      span {
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #909399;
        line-height: 22px;
        cursor: pointer;

      }

      .active {
        color: #333;
        font-weight: 600;
      }
    }

    .overview-content {
      padding: 6px 13px 26px 12px;

      .content-item1 {
        width: 100%;
        height: 76px;
        margin-top: 15px;

        .overview-icon {
          background: url('../../assets/image/策划@2x.png') no-repeat 0 center;
          background-size: 12px 12px;
          height: 14px;
          line-height: 14px;
          padding-left: 17px;
          color: #909399;
          font-size: 13px;
        }

        .content-info {
          height: 60px;
          margin-top: 4px;
          background: #F5F7FA;
          border-radius: 2px;

          .content-info-item {
            display: flex;

            .item_div {
              flex: 1;
              height: 22px;
              line-height: 22px;
              margin-top: 18px;
              padding-left: 29px;
            }
          }
        }
      }

      .content-item2 {
        width: 100%;
        height: 76px;
        margin-top: 15px;

        .overview-icon {
          background: url('../../assets/image/组织机构@2x.png') no-repeat 0 center;
          background-size: 12px 12px;
          height: 14px;
          line-height: 14px;
          padding-left: 17px;
          color: #909399;
          font-size: 13px;
        }

        .content-info {
          height: 60px;
          margin-top: 4px;
          background: #F5F7FA;
          border-radius: 2px;

          .content-info-item {
            display: flex;

            .item_div {
              flex: 1;
              height: 22px;
              line-height: 22px;
              margin-top: 18px;
              padding-left: 29px;
            }
          }
        }
      }

      .content-item3 {
        width: 100%;
        height: 76px;
        margin-top: 15px;

        .overview-icon {
          background: url('../../assets/image/成员@2x.png') no-repeat 0 center;
          background-size: 12px 12px;
          height: 14px;
          line-height: 14px;
          padding-left: 17px;
          color: #909399;
          font-size: 13px;
        }

        .content-info {
          height: 60px;
          margin-top: 4px;
          background: #F5F7FA;
          border-radius: 2px;

          .content-info-item {
            display: flex;

            .item_div {
              flex: 1;
              height: 22px;
              line-height: 22px;
              margin-top: 18px;
              padding-left: 29px;
            }
          }
        }
      }

      .content-item4 {
        width: 100%;
        height: 76px;
        margin-top: 15px;

        .overview-icon {
          background: url('../../assets/image/分包商@2x.png') no-repeat 0 center;
          background-size: 12px 12px;
          height: 14px;
          line-height: 14px;
          padding-left: 17px;
          color: #909399;
          font-size: 13px;
        }

        .content-info {
          height: 60px;
          margin-top: 4px;
          background: #F5F7FA;
          border-radius: 2px;

          .content-info-item {
            display: flex;

            .item_div {
              flex: 1;
              height: 22px;
              line-height: 22px;
              margin-top: 18px;
              padding-left: 29px;
            }
          }
        }
      }

      .build-content {
        .el-table--scrollable-y ::-webkit-scrollbar {
          display: none;
        }
      }

    }
  }

</style>
